<template>
  <el-dialog :model-value="visible" :title="title" width="800" :close-on-click-modal="false" :show-close="false">
    <el-form ref="formRef" :model="form" :rules="formRules" label-width="100" inline>
      <el-form-item class="form-item-line" label="物料" prop="materialCode">
        <el-select @change="valueChanged" v-model="form.materialCode">
          <el-option v-for="item in materialList" :key="item.code" :label="item.name" :value="item.code"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="form-item-line" label="数量" prop="count">
        <el-input-number v-model.number="form.count" :min="0" :step="1"></el-input-number>
      </el-form-item>
      <el-form-item class="form-item-line" label="SN" prop="sn">
        <el-input type="textarea" :row="8" v-model="form.sn"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="emits('close')">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import StrUitl from '@/plugins/str';
import ApiTree from '@/server/api-tree';
import { DictTypeEnum, type DictVO } from '@/server/dict/types';
import type { ShippingMaterialVO } from '@/server/shipping/types';
import type { FormInstance, FormRules } from 'element-plus';
import { reactive, ref, useTemplateRef, watch } from 'vue';

const emits = defineEmits(["close", "save"])
const props = withDefaults(defineProps<{ visible: boolean, data: (ShippingMaterialVO & { guid: string }) | null }>(), {
  visible: false,
  data: null
});
const title = ref<string>("添加物料");
const form = ref<ShippingMaterialVO & { guid: string }>({
  material: "",
  materialCode: "",
  count: 0,
  sn: "",
  guid: ""
});
const formRef = useTemplateRef<FormInstance>("formRef")
const formRules = reactive<FormRules<ShippingMaterialVO>>({
  materialCode: [{ required: true, message: "物料不能为空" }],
  // count: [{ required: true, message: "数量不能为空" }, { min: 1, type: "number", message: "数量不能小于1" }],
  // sn: [{ required: true, message: "SN不能为空" }]
})
const initForm = () => {
  form.value = {
    material: "",
    materialCode: "",
    count: 0,
    sn: "",
    guid: ""
  }
}
const materialList = ref<DictVO[]>([])
const getMaterialList = async () => {
  const { success, data } = await ApiTree.dict.list(DictTypeEnum.MATERIAL, true);
  if (success) {
    materialList.value = data;
  }
}

const valueChanged = () => {
  const material = materialList.value.find(x => x.code === form.value.materialCode);
  form.value.material = material?.name || "";
}
const submit = () => {
  formRef.value?.validate(valid => {
    if (valid) {
      emits("save", {
        ...form.value,
        sn: StrUitl.trim(form.value.sn, '"')
      });
    }
  })
}
watch(() => props.visible, () => {
  if (props.visible) {
    title.value = props.data ? `编辑物料` : "添加物料";
    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
    props.data ? form.value = { ...props.data } : initForm();
    getMaterialList();
  }
})
</script>
<style lang="scss" scope></style>
